<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all 1s;
        }
        body {
            transform-style: preserve-3d;
        }
        .box,.pipe {
            width: 300px;
            height: 300px;
            color: #fff;
            text-shadow: 0 0 4px #fff;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
        }
        .box {
            position: relative;
            margin: 200px auto 0;
            transform-style: preserve-3d;
        }
        .pipe {
            position: absolute;
            top: 0;
            left: 0;
        }
        .btn {
            width: 200px;
            height: 60px;
            border-radius: 8px;
            background-color: #0a0;
            box-shadow: 0 0 4px 2px #ccc;
            position: fixed;
            top: 20px;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
            cursor: pointer;
        }
        .prev-btn {
            left: 100px;
        }
        .next-btn {
            right: 100px;
        }
    </style>
</head>
<body style="overflow: hidden;">
    <div class="box">
        <div class="pipe">前</div>
        <div class="pipe">后</div>
        <div class="pipe">左</div>
        <div class="pipe">右</div>
        <div class="pipe">上</div>
        <div class="pipe">下</div>
    </div>
    <!-- <div class="prev-btn btn">上一步</div> -->
    <div class="next-btn btn">下一步</div>
</body>
<script>
    function color(){
        const r = Math.floor(Math.random() * 128)
        const g = Math.floor(Math.random() * 128)
        const b = Math.floor(Math.random() * 128)
        return `rgba(${r},${g},${b},.8)`
    }
    const pipes = document.querySelectorAll('.pipe')
    pipes.forEach(e=>e.style.backgroundColor = color())

    function boxTrun(){
        document.querySelector('.box').style.transform = 'rotateY(-30deg) rotateX(-15deg)'
    }

    function frontMove(){
        document.querySelector('.pipe:nth-child(1)').style.transform = 'translateZ(150px)'
    }

    function backTrun(){
        document.querySelector('.pipe:nth-child(2)').style.transform = 'rotateY(180deg)'
    }

    function backMove(){
        document.querySelector('.pipe:nth-child(2)').style.transform = 'rotateY(180deg) translateZ(150px)'
    }

    function leftTrun(){
        document.querySelector('.pipe:nth-child(3)').style.transform = 'rotateY(-90deg)'
    }

    function leftMove(){
        document.querySelector('.pipe:nth-child(3)').style.transform = 'rotateY(-90deg) translateZ(150px)'
    }

    function rightTrun(){
        document.querySelector('.pipe:nth-child(4)').style.transform = 'rotateY(90deg)'
    }

    function rightMove(){
        document.querySelector('.pipe:nth-child(4)').style.transform = 'rotateY(90deg) translateZ(150px)'
    }

    function topTrun(){
        document.querySelector('.pipe:nth-child(5)').style.transform = 'rotateX(90deg)'
    }

    function topMove(){
        document.querySelector('.pipe:nth-child(5)').style.transform = 'rotateX(90deg) translateZ(150px)'
    }

    function bottomTrun(){
        document.querySelector('.pipe:nth-child(6)').style.transform = 'rotateX(-90deg)'
    }

    function bottomMove(){
        document.querySelector('.pipe:nth-child(6)').style.transform = 'rotateX(-90deg) translateZ(150px)'
    }

    let step = -1

    const steps = [boxTrun,frontMove,backTrun,backMove,leftTrun,leftMove,rightTrun,rightMove,topTrun,topMove,bottomTrun,bottomMove]

    document.querySelector('.next-btn').onclick = function(){
        if(step >= steps.length -1) return
        steps[++step]()
        console.log('end');
    }

</script>
</html>